<div class="row">
  <div class="col-lg-6">
    <h5 class="text-black"><strong>Default Carousel</strong></h5>
    <div class="mb-5">
      <hi-carousel [interval]="2 * 1000" [(activeSlide)]="activeSlide" #carousel="carousel">
        <ng-template hiSlide>
          <img alt="First slide [900x500]" class="img-responsive" width="100%"
               data-src="holder.js/900x500/auto/#777:#555/text:First slide"
               src=""
               data-holder-rendered="true">
        </ng-template>

        <ng-template hiSlide>
          <img alt="Second slide [900x500]" class="img-responsive" width="100%"
               data-src="holder.js/900x500/auto/#666:#444/text:Second slide"
               src=""
               data-holder-rendered="true">
        </ng-template>

        <ng-template hiSlide>
          <img alt="Third slide [900x500]" class="img-responsive" width="100%"
               data-src="holder.js/900x500/auto/#555:#333/text:Third slide"
               src=""
               data-holder-rendered="true">
        </ng-template>
      </hi-carousel>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="mb-5">
      <h5 class="text-black"><strong>Captions</strong></h5>
      <hi-carousel [interval]="2 * 1000" [(activeSlide)]="activeSlide" #carousel="carousel">
        <ng-template hiSlide>
          <img alt="First slide [900x500]" class="img-responsive" width="100%"
               data-src="holder.js/900x500/auto/#777:#555/text:First slide"
               src=""
               data-holder-rendered="true">
          <div class="carousel-caption">
            <h3>First slide [900x500]</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </div>
        </ng-template>

        <ng-template hiSlide>
          <img alt="Second slide [900x500]" class="img-responsive" width="100%"
               data-src="holder.js/900x500/auto/#666:#444/text:Second slide"
               src=""
               data-holder-rendered="true">
          <div class="carousel-caption">
            <h3>Second slide [900x500]</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </div>
        </ng-template>

        <ng-template hiSlide>
          <img alt="Third slide [900x500]" class="img-responsive" width="100%"
               data-src="holder.js/900x500/auto/#555:#333/text:Third slide"
               src=""
               data-holder-rendered="true">
          <div class="carousel-caption">
            <h3>Third slide [900x500]</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </div>
        </ng-template>
      </hi-carousel>
    </div>
  </div>
</div>
